<template>
  <div class="tinymce-box">
    <Editor :id="props.id"
            v-model="contentValue"
            :init="init"
    />
  </div>
</template>
<script lang="ts" setup>
import tinymce from 'tinymce/tinymce' // tinymce核心文件
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/models/dom' // 引入dom模块。从 Tinymce6，开始必须有此模块导入
import 'tinymce/themes/silver' // 默认主题
import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/langs/zh-CN.js'
import 'tinymce/themes/silver/theme' // 引用主题文件
/* 引入编辑器插件
 * 位于 ./node_modules/tinymce/plugins 目录下，版本不同，插件会有所差异。根据自己版本来导入，若不存在的，不能导入，会报错。
 */
import 'tinymce/plugins/advlist' // 高级列表
import 'tinymce/plugins/anchor' // 锚点
import 'tinymce/plugins/autolink' // 自动链接
import 'tinymce/plugins/autosave' // 自动存稿
import 'tinymce/plugins/code' // 编辑源码
import 'tinymce/plugins/codesample' // 代码示例
import 'tinymce/plugins/directionality' // 文字方向
import 'tinymce/plugins/fullscreen' // 全屏
import 'tinymce/plugins/help' // 帮助
import 'tinymce/plugins/emoticons' // 表情
import 'tinymce/plugins/autoresize' // 编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/image' // 插入编辑图片
import 'tinymce/plugins/importcss' // 引入css
import 'tinymce/plugins/quickbars' // 快速工具栏
import 'tinymce/plugins/insertdatetime' // 插入日期时间
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/media' // 插入编辑媒体
import 'tinymce/plugins/nonbreaking' // 插入不间断空格
import 'tinymce/plugins/pagebreak' // 插入分页符
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/save' // 保存
import 'tinymce/plugins/searchreplace' // 查找替换
import 'tinymce/plugins/table' // 表格
import 'tinymce/plugins/template' // 内容模板
import 'tinymce/plugins/visualblocks' // 显示元素范围
import 'tinymce/plugins/visualchars' // 显示不可见字符
import 'tinymce/plugins/wordcount' // 字数统计

import { commonStore } from '@/store/index'
const store = commonStore()
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: '',
  },
  menubar: {
    type: [Boolean, String],
    default: 'file edit insert view format table tools help',
  },
  height: {
    type: Number,
    default: 600,
  },
  id: {
    type: [String, Number],
    default: 'myTinymce',
  },
})

const emit = defineEmits(['update:modelValue'])
const contentValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
// const editorUploadImage = (blobInfo: { blob: () => string | Blob }, progress: any) => {
// new Promise((resolve, reject) => {
// if (blobInfo.blob().size / 1024 / 1024 > 2) {
//   reject({ message: '上传失败，图片大小请控制在 2M 以内', remove: true });
//   return;
// } else {
//   const ph =
//     import.meta.env.VITE_BASE_PATH + ':' + import.meta.env.VITE_SERVER_PORT + '/';
//   let params = new FormData();
//   params.append('file', blobInfo.blob());
//   let config = {
//     headers: {
//       'Content-Type': 'multipart/form-data',
//     },
//   };
// axios
//   .post('xxxx', params, config)
//   .then((res: { data: { code: string | number; msg: string } }) => {
//     if (res.data.code === 200) {
//       resolve(ph + res.data.msg); //上传成功，在成功函数里填入图片路径
//     } else {
//       reject('HTTP Error: 上传失败' + res.data.code);
//       return;
//     }
//   })
//   .catch(() => {
//     reject('上传出错，服务器开小差了呢');
//     return;
//   });
// }
// }
// }

const init = {
  language: store.locale, // 汉化
  // language: 'zh-Hans', //汉化
  skin_url: '/public/tinymce/skins/ui/oxide', // 皮肤
  content_css: '/public/tinymce/content/default/content.css',
  content_style:
    'body{font-size:14px;font-family:Microsoft YaHei,微软雅黑,宋体,Arial,Helvetica,sans-serif;line-height:1.5}img {max-width:100%;}',
  selector: 'textarea',
  height: props.height,
  menubar: 'file edit view insert format tools table help',
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  menu: {
    file: {
      title: 'File',
      items: 'newdocument | preview | export | deleteallconversations',
    },
    edit: {
      title: 'Edit',
      items: 'undo redo restoredraft | cut copy | selectall | searchreplace',
    },
    view: {
      title: 'View',
      items:
        'code | visualaid visualchars visualblocks | preview fullscreen | showcomments',
    },
    insert: {
      title: 'Insert',
      items:
        'image link media addcomment pageembed template codesample inserttable | charmap emoticons | pagebreak nonbreaking anchor tableofcontents | insertdatetime',
    },
    format: {
      title: 'Format',
      items:
        'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat',
    },
    tools: { title: 'Tools', items: 'a11ycheck code wordcount' },
    table: {
      title: 'Table',
      items: 'inserttable | cell row column | advtablesort | tableprops deletetable',
    },
    help: { title: 'Help', items: 'help' },
  },
  toolbar:
    'fullscreen | code forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent  lineheight | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media | indent2em formatpainter axupimgs',
  plugins:
    'code codesample preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave ',
  line_height_formats: '1 1.2 1.4 1.6 2', // 行高
  font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
  images_file_types: 'jpeg,jpg,png,gif,bmp',
  // images_upload_handler: editorUploadImage(blobInfo, 100),
  placeholder: '在这里输入文字',
  branding: false, // tiny技术支持信息是否显示
  statusbar: true, // 最下方的元素路径和字数统计那一栏是否显示
  elementpath: false, // 元素路径是否显示
  custom_undo_redo_levels: 10, // 撤销和重做的次数
  draggable_modal: true, // 对话框允许拖拽
  // 文件上传
  // file_picker_callback: (callback: (arg0: string, arg1: { text?: string; alt?: string; source2?: string; poster?: string }) => void, value: any, meta: { filetype: string }) => {
  // Provide file and text for the link dialog
  // if (meta.filetype === 'file') {
  //   callback('mypage.html', { text: 'My text' })
  // }

  // // Provide image and alt text for the image dialog
  // if (meta.filetype === 'image') {
  //   callback('myimage.jpg', { alt: 'My alt text' })
  // }

  // // Provide alternative source and posted for the media dialog
  // if (meta.filetype === 'media') {
  //   callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' })
  // }
  // }
}

watch(
  () => store.locale,
  (n, o) => {
    console.log(n)
    tinymce.EditorManager.execCommand('mceRemoveEditor', true, props.id)
    setTimeout(
      () =>
        // tinymce.EditorManager.execCommand('mceAddEditor', true, props.id);
        // tinymce.EditorManager.execCommand('mceAddEditor', true, props.id);
        // tinymce.EditorManager.execCommand('mceAddEditor', true, props.id);
        tinymce.init({ ...init, language: n }),
      200,
    )
  },
)
onMounted(async () => {
  tinymce.init({}) // 初始化
  // tinymce.init;
})
onUnmounted(() => {
  tinymce.remove() // 销毁
})
</script>
<style scoped>
.tinymce-box {
  width: 100%;
}
</style>
